<template>
  <el-popover
    popper-class="explain"
    class="explain-pop"
    placement="right-start"
    title=""
    :width="propWidth"
    trigger="hover"
  >
    <dl v-for="(item, index) in descriptionData" :key="index">
      <dt>
        <span>{{ item.title }}：</span>
        {{ item.des }}
      </dt>
      <dd v-for="(cur, i) in item.con" :key="i">
        <span>{{ cur.title }}：</span>
        {{ cur.des }}
      </dd>
    </dl>
    <div slot="reference" class="el-icon-question"></div>
  </el-popover>
</template>

<script>
export default {
  name: 'data-popover',
  msg: '数据统计-注释说明',
  props: {
    descriptionData: {
      type: Array,
      default() {
        return []
      }
    },
    propWidth: {
      type: [Number, String],
      default() {
        return ''
      }
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="less">
.explain-pop {
  .el-icon-question {
    font-size: 20px;
    cursor: pointer;
  }
}
.el-popper.explain {
  padding-top: 15px;
  padding-bottom: 0px;
  dl {
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
    line-height: 20px;
    span {
      color: #02a7f0;
    }
    dt {
      span {
        font-weight: bold;
      }
    }
  }
}
</style>
